<template>
  <div class="login-container">
    <div class="login">
      <div class="form">
        <div class="left">
          <div class="bg">
            <img :src="bg1" alt="" />
          </div>
        </div>
        <div class="right">
          <!-- 登录 -->
          <el-form
            ref="loginForm"
            v-show="!isShow"
            :rules="loginRules"
            :model="loginForm"
          >
            <el-form-item>
              <h2>旅游自助系统 -- 登陆</h2>
            </el-form-item>
            <el-form-item
              label="用户名"
              prop="username"
              label-width="80px"
              style="width: 90%"
            >
              <el-input v-model="loginForm.username"></el-input>
            </el-form-item>
            <el-form-item
              label="密 码"
              prop="password"
              label-width="80px"
              style="width: 90%"
            >
              <el-input v-model="loginForm.password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="login"
                :loading="loginLoading"
                style="width: 80%"
                >sign in</el-button
              >
            </el-form-item>
            <div class="toggle">
              <el-link class="link" @click="toggle">sign up ></el-link>
              <el-link class="link" @click="$router.push('/forget')"
                >forgot ?</el-link
              >
            </div>
          </el-form>
          <!-- 注册 -->
          <el-form
            ref="registerForm"
            v-show="isShow"
            :rules="registerRules"
            :model="registerForm"
          >
            <el-form-item>
              <h2>旅游自助系统 -- 注册</h2>
            </el-form-item>
            <el-form-item
              label="用户名"
              prop="username"
              label-width="80px"
              style="width: 90%"
            >
              <el-input v-model="registerForm.username"></el-input>
            </el-form-item>
            <el-form-item
              label="密 码"
              prop="password"
              label-width="80px"
              style="width: 90%"
            >
              <el-input v-model="registerForm.password"></el-input>
            </el-form-item>
            <el-form-item
              label="确认密码"
              prop="verifyPwd"
              label-width="80px"
              style="width: 90%"
            >
              <el-input v-model="registerForm.verifyPwd"></el-input>
            </el-form-item>
            <el-form-item
              label="姓名"
              prop="name"
              label-width="80px"
              style="width: 90%"
            >
              <el-input v-model="registerForm.name"></el-input>
            </el-form-item>
            <el-form-item
              label="手机号"
              prop="phone"
              label-width="80px"
              style="width: 90%"
            >
              <el-input v-model="registerForm.phone"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="register"
                :loading="registerLoading"
                style="width: 80%"
                >sign up</el-button
              >
            </el-form-item>
            <div class="toggle">
              <el-link class="link" @click="toggle">sign in ></el-link>
            </div>
          </el-form>
        </div>
      </div>
      <span>{{ msg }}</span>
    </div>
  </div>
</template>

<script>
import bg1 from "@/assets/bg1.jpg";
import { getShortSentence } from "@/api/common";
import { login, register } from "@/api/user/user";
import userModule from "@/utils/userInfo";

export default {
  name: "LoginView",
  data() {
    return {
      bg1,
      msg: "",
      isShow: false,
      loginForm: {
        username: "yechen",
        password: "yechen",
      },
      loginRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      loginLoading: false,
      registerForm: {
        username: "",
        password: "",
        verifyPwd: "",
        name: "",
        phone: "",
      },
      registerRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        verifyPwd: [
          { required: true, message: "请再次输入密码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (value !== this.registerForm.password) {
                callback(new Error("两次输入的密码不一致"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        name: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
      },
      registerLoading: false,
    };
  },
  created() {
    this.getShortSentence();
  },
  methods: {
    // 获取随机短句（素颜api）
    async getShortSentence() {
      const res = await getShortSentence();
      this.msg = res.data;
    },
    // 切换
    toggle() {
      this.isShow = !this.isShow;
      this.$refs.loginForm.resetFields();
      this.$refs.registerForm.resetFields();
    },
    // 登陆
    login() {
      this.$refs.loginForm.validate(async (v) => {
        if (v) {
          try {
            this.loginLoading = true;
            const res = await login(this.loginForm);
            localStorage.setItem("u_t", res.data.token);
            userModule.setUser({
              id: res.data.id,
              name: res.data.name,
              avatar: res.data.avatar,
              area: res.data.area,
            });
            this.$router.push("/home");
          } finally {
            this.loginLoading = false;
          }
        }
      });
    },
    // 注册
    register() {
      this.$refs.registerForm.validate(async (v) => {
        if (v) {
          try {
            this.registerLoading = true;
            const res = await register(this.registerForm);
            this.toggle();
          } finally {
            this.registerLoading = false;
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login-container {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url("https://api.suyanw.cn/api/scenery.php");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
  }
  .login {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 880px;
    height: 500px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    .form {
      margin: 0 auto;
      display: flex;
      width: 100%;
      height: 90%;
      border-radius: 10px;
      .left {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: inherit;
        width: 60%;
        height: 100%;
        .bg {
          position: relative;
          width: 100%;
          height: 100%;
          border-radius: inherit;
          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: inherit;
            background-image: radial-gradient(
              circle,
              rgba(255, 255, 255, 0) 0%,
              rgba(255, 255, 255, 1) 80%
            );
          }
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: inherit;
          }
        }
      }
      .right {
        width: 40%;
        height: 100%;
        padding-top: 20px;
        .toggle {
          display: flex;
          justify-content: space-between;
          margin: 0 auto;
          margin-top: -10px;
          width: 80%;
          .link {
            transition: all 0.3s;
            &:hover {
              transform: scale(1.1);
            }
            &:active {
              transform: scale(1.02);
            }
          }
        }
      }
    }
    span {
      position: absolute;
      bottom: 0;
      transform: translate(-50%, -50%);
      font-size: 13px;
      color: #999;
    }
  }
}
</style>